{% extends "base.html" %}
{% block base.html %}
    <style type="text/css">
        #index-card {
                margin: 0 auto 16px auto;

            }
            @media screen and (min-width: 1200px) {
                #index-card {
                    width: 60%;
                }
            }
            @media screen and (max-width: 1100px) {
                #index-card {
                    width: 92%;
                }
            }
            @media screen and (max-width: 800px) {
                #index-card {
                    width: 96%;
                }
            }
            @media screen and (max-width: 600px) {
                #index-card {
                    width: 100%;
                }
            }
            article {
                text-overflow: ellipsis;
                word-wrap: break-word;
                overflow: hidden;
                max-height: 52em;
            }
    </style>
    {% if articles.number == 1 %}
    {% if tops %}
    {% for top in tops %}
    <div class="card hoverable" id="index-card">
        <div class="card-content">
            <div class="card-title">
                <a style="color: RGBA(0, 0, 0, 0.87);" href={% url "article_detail_page" top.member.number top.year.year top.year.first_half top.week.week %}>
                    {{ top.member }}{{ top.year }}第{{ top.week }}周周总结
                </a>
            </div>
            <p>
                <button class="btn-small waves-effect waves-light">
                    <i class="fa fa-calendar fa-emoji" title="calendar"></i>
                    <span>{{ top.upload_time|date:"Y-m-d" }} </span>
                </button>
                <button class="btn-small waves-effect waves-light">
                    <i class="material-icons left" style="margin: 0 auto;">publish</i><span>置顶</span>
                </button>
            </p>
            <div id="preview" class="markdown-body editormd-preview-container editormd-html-preview">
            {% if top.doc %}
            <article>{{ top.docxToHTML }}</article>
            <hr></hr>
            {% endif %}
            {% if top.md %}
            <article>
                <h2 style="color: #ff6868;">为获得更好的Markdown文档阅读体验, 请点击下方的阅读全文进入详情页</h2>
                {{ top.mdToHTML }}
            </article>
            <hr></hr>
            {% endif %}
            </div>
            <p>
                <a class="btn-small waves-effect waves-light" href={% url "article_detail_page" top.member.number top.year.year top.year.first_half top.week.week %}>
                    <i class="material-icons left" style="margin: 0 auto;">local_library</i><span>阅读全文</span>
                </a>
                {% if top.doc %}
                <a class="btn-small waves-effect waves-light" href="{{ top.doc.url }}" download="{{ top.member }}{{ top.year }}第{{ top.week }}周周总结.docx">
                    <i class="material-icons left" style="margin: 0 auto;">cloud_download</i><span>下载Word文档</span>
                </a>
                {% endif %}
                {% if top.md %}
                <a class="btn-small waves-effect waves-light" href="{{ top.md.url }}" download="{{ top.member }}{{ top.year }}第{{ top.week }}周周总结.md">
                    <i class="material-icons left" style="margin: 0 auto;">cloud_download</i><span>下载Markdown文档</span>
                </a>
                {% endif %}
            </p>
        </div>
    </div>
    {% endfor %}
    {% endif %}
    {% endif %}

    {% for article in articles %}
    <div class="card hoverable" id="index-card">
        <div class="card-content">
            <div class="card-title">
                <a style="color: RGBA(0, 0, 0, 0.87);" href={% url "article_detail_page" article.member.number article.year.year article.year.first_half article.week.week %}>
                    {{ article.member }}{{ article.year }}第{{ article.week }}周周总结
                </a>
            </div>
            <p>
                <button class="btn-small waves-effect waves-light">
                    <i class="fa fa-calendar fa-emoji" title="calendar"></i>
                    <span>{{ article.upload_time|date:"Y-m-d" }} </span>
                </button>
            </p>
            <div id="preview" class="markdown-body editormd-preview-container editormd-html-preview">
            {% if article.doc %}
            <article>{{ article.docxToHTML }}</article>
            <hr></hr>
            {% endif %}
            {% if article.md %}
            <article>
                <h2 style="color: #ff6868;">为获得更好的Markdown文档阅读体验, 请点击下方的阅读全文进入详情页</h2>
                {{ article.mdToHTML }}
            </article>
            <hr></hr>
            {% endif %}
            </div>
            <p>
                <a class="btn-small waves-effect waves-light" href={% url "article_detail_page" article.member.number article.year.year article.year.first_half article.week.week %}>
                    <i class="material-icons left" style="margin: 0 auto;">local_library</i><span>阅读全文</span>
                </a>
                {% if article.doc %}
                <a class="btn-small waves-effect waves-light" href="{{ article.doc.url }}" download="{{ article.member }}{{ article.year }}第{{ article.week }}周周总结.docx">
                    <i class="material-icons left" style="margin: 0 auto;">cloud_download</i><span>下载Word文档</span>
                </a>
                {% endif %}
                {% if article.md %}
                <a class="btn-small waves-effect waves-light" href="{{ article.md.url }}" download="{{ article.member }}{{ article.year }}第{{ article.week }}周周总结.md">
                    <i class="material-icons left" style="margin: 0 auto;">cloud_download</i><span>下载Markdown文档</span>
                </a>
                {% endif %}
            </p>
        </div>
    </div>
    {% endfor %}


    <ul class="pagination center">
        {% if articles.has_previous %}
        <li class="waves-effect">
            <a href="?page={{ articles.previous_page_number }}">
                <i class="material-icons">chevron_left</i>
            </a>
        </li>
        {% else %}
        <li class="disabled"><a href=""><i class="material-icons">chevron_left</i></a></li>
        {% endif %}
        <li class="waves-effect">
            <a href="?page={{ articles.number }}">{{ articles.number }}</a>
            <span> / </span>
            <a href="?page={{ articles.paginator.num_pages }}">{{ articles.paginator.num_pages }}</a>
        </li>
        {% if articles.has_next %}
        <li class="waves-effect">
            <a href="?page={{ articles.next_page_number }}">
                <i class="material-icons">chevron_right</i>
            </a>
        </li>
        {% else %}
        <li class="disabled"><a href=""><i class="material-icons">chevron_right</i></a></li>
        {% endif %}
    </ul>
{% endblock %}